<template>
  <el-aside width="20rem" class="el-aside-h">
    <el-input v-model="itemfilter" />
    <el-tree
      ref="stationtree"
      class="filter-tree"
      :data="displayItem"
      :props="defaultProps"
      @node-click="selectCategory"
    />
  </el-aside>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'StationTree',
  props: {
    value: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      itemfilter: null,
      stationInfo: [],
      defaultProps: {
        // children: 'point',
        label: 'name'
      }
    }
  },
  computed: {
    ...mapState({
      service: state => state.service,
      display: state => state.systemProfile.display,
      stationConfig: state => state.systemProfile.categoryConfig.station
    }),
    displayInfo() {
      return this.stationConfig.infolist
        .filter(item =>
          item &&
          item.info_id &&
          this.display[item.info_id] &&
          this.display[item.info_id].show
        )
    },
    displayItemInfo() {
      for (const station of this.stationInfo) {
        station.info = [...this.displayInfo]
        for (const inf of station.info) {
          const val = station.infolist ? station.infolist.find(item => item.info.uid === inf.info_uid) : null
          inf.value = val ? val.value : null
        }
      }
      return this.stationInfo
    },
    // 磁贴数据筛选显示
    displayItem() {
      if (this.displayItemInfo && this.itemfilter && this.itemfilter.trim()) {
        return this.displayItemInfo.filter(item =>
          item.id.toLowerCase().indexOf(this.itemfilter.trim().toLowerCase()) !== -1 ||
          item.name.toLowerCase().indexOf(this.itemfilter.trim().toLowerCase()) !== -1
        )
      } else {
        return this.displayItemInfo
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 初始化
    async initData() {
      const result = await this.service.getStationInfo()
      if (result && result.flag) {
        this.stationInfo = result.data
      }
      if (!this.value) {
        this.selectCategory(this.displayItem[0])
      }
    },
    selectCategory(data) {
      this.$emit('selectCategory', data)
    }
  }
}
</script>
<style scoped>
.el-aside-h {
  padding: 1rem;
  background-color: #d3dce6;
}
.el-aside-h /deep/ .tree-node {
  color: #333;
}
.el-tree {
  padding: 1rem 0;
  height: calc(100% - 8rem);
  overflow: auto;
  margin-top: 1rem;
}
</style>
